<template>
	<div class="detail-page" v-if="carInfo.cardInfo">
		<div class="headInfo">
			<div class="headItem">
				<span>卡面号</span>
				<span style="float: right;">{{carInfo.cardInfo.NCARDFACENO}}</span>
			</div>
			<div class="fenge"></div>
			<div class="headItem">
				<span>流通号</span>
				<span style="float: right;">{{carInfo.cardInfo.NBATCHNO}}</span>
			</div>
		</div>
		<div>
			<div>
				<el-card class="box-card">
					<div slot="header" class="clearfix">
					    <span class="card-title">{{carInfo.cardInfo.STICKETNAMECH}}</span>
					    <span class="timeOut" v-if="carInfo.cardInfo.OVERTIME !== '未超时'">超时{{carInfo.cardInfo.OVERTIME}}分钟</span>
					</div>
					<div class="cardItem">入园时间：{{carInfo.cardInfo.TWB_TIME}}</div>
					<div class="cardItem">结束时间：{{carInfo.cardInfo.TWB_ENDDATE}}</div>
					<div class="cardItem">门票时长：{{carInfo.cardInfo.DURATION}} 分钟（{{computedTime(carInfo.cardInfo.DURATION)}}）</div>
					<div class="cardItem">剩余时长：{{carInfo.cardInfo.REMAINTIME}} 分钟（{{computedTime(carInfo.cardInfo.REMAINTIME)}}）</div>
					<div class="cardItem" style="color: #E30204;">
						【超时30分钟内免收超时费，超30分钟外（不足30分钟按30分钟计算）按门市价收取超时费】
					</div>
				</el-card>
				<el-card class="box-card">
					<div class="cardItem">教学产品：{{carInfo.TeachingInfoList.length ? carInfo.TeachingInfoList[0].PRODUCTNAME : ""}}</div>
					<div class="cardItem NRETURNCOMMNAME">未归还器材：{{carInfo.RentalInfo.NRETURNCOMMNAME}}</div>
				</el-card>
			</div>
			<div v-show="detail">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
					    <span class="card-title smallTitle">租凭信息</span>
					</div>
					<div class="cardItem">租凭器材：{{carInfo.RentalInfo.PRODUCTNAME}}</div>
					<div class="cardItem">已归还器材：{{carInfo.RentalInfo.RETURNCOMMNAME}}</div>
					<div class="cardItem NRETURNCOMMNAME">未归还器材：{{carInfo.RentalInfo.NRETURNCOMMNAME}}</div>
				</el-card>
				<el-card class="box-card" v-for="item,i of carInfo.TeachingInfoList" :key="i">
					<div slot="header" class="clearfix">
					    <span class="card-title smallTitle">教学信息</span>
						<span class="title-right">{{item.NSTATUS}}</span>
					</div>
					<div class="cardItem">教学产品名称：{{item.PRODUCTNAME}}</div>
					<div class="cardItem">教学单号：{{item.TECHNDEALID}}</div>
					<div class="cardItem">购买时间：{{item.SSELLDATE}}</div>
				</el-card>
				<el-card class="box-card">
					<div slot="header" class="clearfix">
					    <span class="card-title smallTitle">订单信息</span>
					</div>
					<div class="cardItem">订单号：{{carInfo.cardInfo.NDEALID}}</div>
					<div class="cardItem">购买时间：{{carInfo.cardInfo.SSELLDATE}}</div>
					<div class="cardItem">预留手机号：{{carInfo.cardInfo.MOBILE}}</div>
				</el-card>
			</div>
		</div>
		<div class="btn-list">
			<el-button class="detail-Info" @click="switchdetail">{{detail ? "取消" : "详细信息"}}</el-button>
			<el-button class="upgrade" @click="upgrade">购买升级</el-button>
		</div>
		<el-dialog
		 title="升级时长提示"
		 width="280px"
		 :visible.sync="modal"
		 :show-close="false"
		 :modal-append-to-body="false"
		 :close-on-click-modal="false"
		 center>
			<div class="dialogText">已入园时长：{{carInfo.cardInfo.STAYTIME}}</div>
			<div class="dialogText">手机号码：{{carInfo.cardInfo.MOBILE}}</div>
			<div slot="footer">
				<el-button class="btn" @click="modal = false">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
	data () {
		return {
			carInfo : {},
			detail : false,
			modal : false
		}
	},
	// beforeRouteEnter (to,form,next) {
	// 	if (form.name == 'PaySuccess') {
	// 		next(vm=>{
	// 			console.log(vm.$store.state.getCode);
	// 			vm.$store.commit("getNewCode",true);
	// 		});
	// 	} else {
	// 		next();
	// 	}
	// },
	created () {
		this.modal = this.$route.params.pay ? true : false;
		if (this.$route.params.carInfo) {
			this.carInfo = this.$route.params.carInfo;
		} else {
			let CardInfo = JSON.parse(sessionStorage.getItem("CardInfo"));
			this.axios.post("/IceCardSelfHelp/GetIceCardInfo",CardInfo).then(res=>{
				if (res.resStatusInfo.resultCode == "200") {
					this.carInfo = res;
					this.setcardInfo(res.cardInfo);
					sessionStorage.setItem("NBATCHNO",res.cardInfo.NBATCHNO);
				} else {
					this.$message.error(res.resStatusInfo.errReason);
				}
			});
		}
	},
	methods : {
		computedTime (time) {
			if (time) {
				let num = time / 60;
				num = num.toFixed(1);
				return num + "小时"
			} else {
				return time;
			}
		},
		...mapMutations({
			setcardInfo : "setcardInfo"
		}),
		switchdetail () {
			this.detail = !this.detail;
		},
		upgrade () {
			this.$router.push({
				name : "upgrade",
				params : {
					cardInfo : this.carInfo.cardInfo,
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped="scoped">
	.detail-page {
		overflow-y: scroll;
		padding: 10px;
	}
	.box-card {
		margin-bottom: 10px;
	}
	.headInfo {
		font-size: 12px;
		color: #fff;
		height: 80px;
		margin: 13px auto;
		background: linear-gradient(-90deg, #18C2BC 0%, #27CDC2 100%);
		box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
		border-radius: 9px;
		.headItem {
			padding: 13px 18px;
		}
	}
	.fenge {
		margin: 0px auto;
		width: 90%;
		height: 1px;
		background: #49E3D8;
	}
	.card-title {
		color: #333;
		font-weight: bold;
		font-size: 15px;
	}
	.card-title.smallTitle {
		position: relative;
		font-size: 13px;
	}
	.card-title.smallTitle::before {
		content: "";
		display: inline-block;
		position: absolute;
		left: -20px;
		top: 3px;
		background-color: #18C2BD;
		width: 9px;
		height: 12px;
	}
	.timeOut {
		float: right;
		font-size: 16px;
		color: #E30204;
		font-weight: bold;
	}
	.btn-list {
		display: flex;
		justify-content: center;
	}
	.btn-list button {
		border: none;
		width: 132px;
		height: 35px;
		font-size: 15px;
		font-weight: bold;
		line-height : 0px
	}
	.detail-Info {
		margin-right: 22px;
		background: url(../../assets/bluebg.png);
		background-size: 100% 100%;
		color: #FFEA00;
	}
	.upgrade {
		background: url(../../assets/yellowbg.png);
		background-size: 100% 100%;
		color: #00306D;
	}
	.cardItem{
		font-size: 12px;
		color: #333;
		font-weight: 400;
		margin-bottom: 13px;
	}
	.cardItem.NRETURNCOMMNAME {
		color: #E51012;
	}
	.title-right {
		float: right;
		font-size: 13px;
		font-weight: bold;
		color: #18C2BD;
	}
	::v-deep .el-dialog {
		border-radius: 9px;
		.el-dialog__header {
			background-color: #21C9C0;
			border-radius: 9px 9px 0px 0px;
			.el-dialog__title {
				font-size: 17px;
				color: #fff;
			}
		}
	}
	.btn {
		width: 120px;
		height: 33px;
		background: #21C9C0;
		border-radius: 17px;
		line-height: 0px;
		color: #fff;
	}
	.dialogText {
		font-size: 15px;
		margin-bottom: 10px;
		color: #333;
	}
</style>
